<template>
  <div v-loading="outboundLoading" class="delivery-container">
    <DeliveryProgress :delivery-data="deliveryData" :latest-apply-time="allData.latestApplyTime" />

    <StockoutDetail :delivery-data="deliveryData" @getOutboundDetail="getOutboundDetail" />

  </div>
</template>

<script>
import StockoutDetail from './StockoutDetail'
import DeliveryProgress from './DeliveryProgress'
import { outboundDetailInterface } from '@/service/ship'

export default {
  components: {
    StockoutDetail,
    DeliveryProgress
  },
  props: {
    allData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      deliveryData: {},
      id: '',
      outboundLoading: false
    }
  },
  mounted() {
    const { id } = this.$route.params
    this.id = id
    this.getOutboundDetail()
  },
  methods: {
    async getOutboundDetail() {
      this.outboundLoading = true
      this.deliveryData = await outboundDetailInterface({ id: this.id }).finally(() => {
        this.outboundLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
